import { ref, reactive } from 'vue';import Btn from '../elements/btn'
import user from '../routes/user';import admin from '../routes/admin'
import Pagination from '../elements/page';import {L,s} from '../lang'

const input = ref("");let l=ref([]),P:P_=reactive({page:1,size:5,count:100});//初始化默认页数与大小，count是测试用
const Async=() => { let f=[];
  return(<>
    <div>{input.value}</div>
    <button class="button" onClick={()=>{}} id="sdg">{L[s._].test}</button>
    <input v-model={input.value} placeholder={L[s._].placeHolder}/>
    <Btn type="default">{L[s._]["Good Morning"]}</Btn><Btn type="success">{L[s._]['Good Morning']}</Btn>
    <Btn type="primary">{L[s._]["Good Morning"]}</Btn><table class="list">
      {l.value.map((e,i) => <>
        {i===0&&<><tr>{Object.keys(e).map(v=>{if(v!=="roles"){f.push(v);return<th>{L[s._][v]||v}</th>}
          })}<th class="cz">{L[s._].operation}</th></tr><tr>{f.map(v=><td>{e[v]}</td>)}<td class="cz"><Btn type="info">{L[s._].details}</Btn>
          <Btn type="warning">{L[s._].modify}</Btn><Btn type="danger">{L[s._].delete}</Btn></td></tr></>||
        <tr class={i%2==1?"info":""}>{f.map(v=><td>{e[v]}</td>)}<td class="cz"><Btn type="info">{L[s._].details}</Btn>
          <Btn type="warning">{L[s._].modify}</Btn><Btn type="danger">{L[s._].delete}</Btn></td></tr>}
      </>)}
    </table>
    <Pagination page={P.page} size={P.size} count={P.count} 
      cb={async (p,s)=>{P.page=p;P.size=s;let u=await user.pageUser({page:p,size:s});
      if(u){let {list,page}=u;l.value=list;if(page)P.count=page.count;list=page=f=null}
    }}/>
  </>)
}
export default Async
interface P_ {
  page: number;// 当前页[参数]
  size: 5|7|10|15|25|50;// 每页多少条[参数]
  count: number;// 条数
  shift?: number;// 偏移量
}